<template>
  <div class="app-container">
    <el-row :gutter="20" class="header">
      <el-col :span="5">
        <el-input
          placeholder="请输入操作内容..."
          v-model="queryForm.content"
          clearable
          @keyup.enter="initLoggerList(1)"
        ></el-input>
      </el-col>
      <el-col :span="5">
        <el-input
          placeholder="请输入操作人..."
          v-model="queryForm.query"
          clearable
          @keyup.enter="initLoggerList(1)"
        ></el-input>
      </el-col>
      <el-button
        type="primary"
        :icon="Search"
        @click="initLoggerList(1)"
        v-hasPerm="['system:user:query']"
        >搜索</el-button
      >
    </el-row>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      :row-style="{ height: '40px' }"
      :cell-style="{ padding: '0px' }"
    >
      <el-table-column prop="content" label="内容" align="center" />
      <el-table-column prop="username" label="操作人" align="center" />

      <el-table-column prop="createTime" label="创建时间" align="center" />
      <el-table-column prop="ip" label="IP" align="center" />
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="queryForm.pageNum"
        v-model:page-size="queryForm.pageSize"
        :page-sizes="[5, 10, 20, 50, 100]"
        :small="false"
        :disabled="false"
        :background="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: "logger",
};
</script>
<script setup>
import { ref, onMounted } from "vue";
import http, { getServerUrl } from "@/utils/request";
import qs from "qs";
import load from "@/utils/load.js"; // 引入

import {
  Delete,
  DocumentAdd,
  Edit,
  RefreshRight,
  Search,
  Tools,
} from "@element-plus/icons-vue";

const tableData = ref([]);
const total = ref(0);
const queryForm = ref({
  content: "",
  query: "",
  pageNum: 1,
  pageSize: 5,
});

const getLoggerList = () => {
  initLoggerList(1);
};
const initLoggerList = async (pageNum) => {
  load.show();
  if (pageNum) queryForm.value.pageNum = pageNum;
  let result = await http.post("sys/logger/list", queryForm.value);
  let res = result.data;
  if (res.code == 200) {
    tableData.value = res.data.loggerList;
    total.value = res.data.total;
    setTimeout(() => {
      load.hide();
    }, 500);
  } else {
    load.hide();
  }
};
const handleSizeChange = (val) => {
  queryForm.value.pageSize = val;
  console.log("queryForm", queryForm);
  initLoggerList();
};
const handleCurrentChange = (val) => {
  queryForm.value.pageNum = val;
  initLoggerList();
};
onMounted(() => {
  initLoggerList();
});
</script>

<style lang="less" scoped>

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}

.el-pagination {
  float: right;
  padding: 20px;
  box-sizing: border-box;
}

.el-table__cell {
  word-break: break-word;
  background-color: #f8f8f9 !important;
  color: #515a6e;
  height: 40px;
  font-size: 13px;
}

.el-tag--small {
  margin-left: 5px;
}
</style>